<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.rolling.js"></script>
<script>
$(function() {
	eval($('#code').text());
});	

function reverse(rollingDivId) {
	$("#" + rollingDivId).reverseRolling();
}

var startMouseEventTime = 0
var endMouseEventTime = 0
var startMouseEvnetX = -1;
var endMouseEventX = -1;

function normal() {
	var rollingDiv = $("#rollingDiv");
	var rollingAnimationFrame = rollingDiv.getRollingAnimationFrame();
	if (rollingAnimationFrame < 100) {
		rollingAnimationFrame += 10;
	} else {
		rollingAnimationFrame = 100;
		rollingDiv.stopRolling();
	}
	$("#commentDiv").text("rollingAnimationFrame: " + rollingAnimationFrame);
	rollingDiv.setRollingAnimationFrame(rollingAnimationFrame);
	setTimeout('normal()', 1000);	
}	

</script>
<body>
<h2>Mouse Event6</h2>
mouse drag start, rolling start and mouse click, rolling stop.
<hr>
<div id="rollingDiv"></div>
<div id="commentDiv"></div>
<hr>
<h2>Script</h2>
<xmp id='code'>
var rollingDiv = $("#rollingDiv");	
	rollingDiv.rolling("right", 130, 100, 5);
	
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ayjjsallNwc' target='_new'><img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg' width='130' height='100' alt='1 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=pe-MIDDfckw' target='_new'><img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg' width='130' height='100' alt='2 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=AyRIvX25vRQ' target='_new'><img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg' width='130' height='100' alt='3 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=GxplDa3M5Io' target='_new'><img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg' width='130' height='100' alt='4 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=v6MKOY9x_ds' target='_new'><img src='http://i.ytimg.com/vi/v6MKOY9x_ds/default.jpg' width='130' height='100' alt='5 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ZBDD7aLd6lc' target='_new'><img src='http://i.ytimg.com/vi/ZBDD7aLd6lc/default.jpg' width='130' height='100' alt='6 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=et-dNoTi8IY' target='_new'><img src='http://i.ytimg.com/vi/et-dNoTi8IY/default.jpg' width='130' height='100' alt='7 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=mX1xyxWkmw0' target='_new'><img src='http://i.ytimg.com/vi/mX1xyxWkmw0/default.jpg' width='130' height='100' alt='8 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=fRWov2pdJkE' target='_new'><img src='http://i.ytimg.com/vi/fRWov2pdJkE/default.jpg' width='130' height='100' alt='9 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=QCmP4bEJfOg' target='_new'><img src='http://i.ytimg.com/vi/QCmP4bEJfOg/default.jpg' width='130' height='100' alt='10 item' border='0'/></a>")
   
   
   rollingDiv.mousedown(function(e) {
   	startMouseEvnetX = e.pageX
   	lastMouseEventTime = (new Date()).getTime();
   	startMouseEventTime = lastMouseEventTime;      	
   });
   
   rollingDiv.mouseup(function(e) {
   startMouseEvnetX = -1;
   	rollingDiv.stopRolling();
   });
   
  //  rollingDiv.mouseout(function(e) {
  //  startMouseEvnetX = -1;
  // 	rollingDiv.stopRolling();
  // });
   
   rollingDiv.mousemove(function(e) {
   if (startMouseEvnetX == -1) {
   		return;
   	}
   	
   	//if ((new Date()).getTime() - lastMouseEventTime < 10) {
   	//	return;
   	//}
   	
   	
   	if (Math.abs(e.pageX - startMouseEvnetX) > 5) {
			$(this).setRollingAnimationFrame(20);
			
			
			if (e.pageX - startMouseEvnetX < 0) {				
				if ($(this).getRollingDirection() == "right") {
	   			$(this).reverseRolling();
	   		}
			} else {
				if ($(this).getRollingDirection() == "left") {
	   			$(this).reverseRolling();
	   		}
			}
			rollingDiv.resumeRolling();
		} else {
			rollingDiv.stopRolling();
		}
	});
	
   rollingDiv.startRolling(30, 0, 100);	
   rollingDiv.stopRolling();
</xmp>
</body>